<template>
  <div class="fadeInUp animated" style="width: 1200px;margin: 0 auto;height: 93vh">
    <div style="width: 100%;text-align: center;font-size: 40px;font-weight: 800;height: 100px;line-height: 100px;">权益说明</div>
    <div class="clear jjg" style="width: 100%;">
      <div class="ti1">
        <div class="t1">
          <p>功能说明</p></div>
        <div class="text-align">价格</div>
        <div class="text-align">赠送金币</div>
        <div class="text-align">尊贵vip标识</div>
        <div class="text-align">课程</div>
        <div class="text-align">专栏数量</div>
        <div class="text-align">自定义导航</div>
        <div class="text-align">经验</div>
        <div class="text-align">金币</div>
        <div class="text-align">文章曝光</div>
        <div class="text-align">发帖限制</div>
        <div class="text-align">一对一沟通</div>
        <div class="text-align">简历指导</div>
        <div class="text-align">面试指导</div>
        <div class="text-align">自定义个人中心CSS</div>
        <div class="text-align">会员时长</div>
      </div>
      <div class="ti1" v-for="(item,i) in  list" :key="list.id">
        <div class="t1">
          <p>{{item.shengfen}}</p>
          <span>开通{{item.shengfen}}</span>
        </div>
        <div class="text-align"><span style="text-decoration: line-through;">&yen{{item.yuanjiege}}</span>&nbsp;&yen{{item.xianjiage}}</div>
        <div class="text-align">{{item.zhenhuobi}}</div>
        <div class="text-align">{{item.zonshen}}</div>
        <div class="text-align">{{item.kecheng}}</div>
        <div class="text-align">{{item.zhuanlan}}个</div>
        <div class="text-align">{{item.zdydaohang}}个</div>
        <div class="text-align">签到+{{item.jinyan}}exp</div>
        <div class="text-align">每日上限{{item.huobi}}金币</div>
        <div class="text-align">{{item.wenzhang}}</div>
        <div class="text-align">{{item.fatie}}</div>
        <div class="text-align" style="line-height: 50px;">
          <img v-if="item.enoduieno==1" src="../../assets/duigou.png" alt="" srcset="" style="width: 20px;">
          <img v-else src="../../assets/cuo.png" alt="" srcset="" style="width: 20px;"></div>
        <div class="text-align" style="line-height: 50px;">
          <img v-if="item.jianlizhidao==1" src="../../assets/duigou.png" alt="" srcset="" style="width: 20px;">
          <img v-else src="../../assets/cuo.png" alt="" srcset="" style="width: 20px;"></div>
        <div class="text-align" style="line-height: 50px;">
          <img v-if="item.mianshizhidao==1" src="../../assets/duigou.png" alt="" srcset="" style="width: 20px;">
          <img v-else src="../../assets/cuo.png" alt="" srcset="" style="width: 20px;"></div>
        <div class="text-align" style="line-height: 50px;">
          <img v-if="item.zdyicss==1" src="../../assets/duigou.png" alt="" srcset="" style="width: 20px;">
          <img v-else src="../../assets/cuo.png" alt="" srcset="" style="width: 20px;"> </div>
        <div class="text-align">{{item.viptime}}天</div>

      </div>
    </div>
    <div style="height: 200px;width: 100%;"></div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Vip',

  data() {
    return {
      list:[
        {
          id:1,
          shengfen:'终身会员',
          fl:'开通终身会员',
          yuanjiege:10240,
          xianjiage:8080,
          zhenhuobi:1000000,
          zonshen:'终身VIP标识',
          kecheng:'所有课程免费',
          zhuanlan:'20',
          zdydaohang:'40',
          jinyan:'100',
          huobi:'50',
          wenzhang:'高',
          fatie:'不限',
          enoduieno:1,
          jianlizhidao:1,
          mianshizhidao:1,
          zdyicss:1,
          viptime:36500
        },
        {
          id:2,
          shengfen:'年会员',
          fl:'开通年会员',
          yuanjiege:499,
          xianjiage:299,
          zhenhuobi:30000,
          zonshen:'年会员标识',
          kecheng:'专题课7.5折',
          zhuanlan:'20',
          zdydaohang:'40',
          jinyan:'100',
          huobi:'50',
          wenzhang:'高',
          fatie:'不限',
          enoduieno:0,
          jianlizhidao:0,
          mianshizhidao:0,
          zdyicss:1,
          viptime:365
        },
        {
          id:3,
          shengfen:'月会员',
          fl:'开通月会员',
          yuanjiege:49,
          xianjiage:30,
          zhenhuobi:3000,
          zonshen:'月会员标识',
          kecheng:'专题课7.5折',
          zhuanlan:'20',
          zdydaohang:'40',
          jinyan:'100',
          huobi:'50',
          wenzhang:'高',
          fatie:'不限',
          enoduieno:0,
          jianlizhidao:0,
          mianshizhidao:0,
          zdyicss:1,
          viptime:100
        },
      ],
      urlzhe:"../../assets/cuo.png"
    };
  },
  methods: {
  },
  created() {
    const apiKey = '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'; // 将 YOUR_API_KEY 替换为您的 OpenAI API密钥
    const prompt = 'Hello, ChatGPT!'; // 您想要输入的提示文本
    const url = 'https://api.openai.com/v1/engines/davinci-codex/completions'; // GPT-3 REST API 的 URL
    // 创建一个包含所需参数的对象
    const params = {
      prompt: prompt,
      max_tokens: 5
    };
    axios.post(url, params, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      }
    })
    .then(response => {
      console.log(response.data.choices[0].text); // 打印API返回的文本
    })
    .catch(error => {
      console.error(error);
    });
  },
  watch(){

  }
};
</script>

<style lang="less" scoped>
.ti1{
  display: inline-block;
  float: left;
  box-sizing: border-box;
  border: 1px solid #d3d1d0;
  width: 300px;
  background-color: white;
}
.t1{
  text-align: center;
  height: 120px;
  p{
    line-height: 80px;
    font-size: 20px;
  }
  span{
    display: inline-block;
    border-radius: 15px;
    width: 140px;
    height: 30px;
    background-color: #1698dd;
    line-height: 30px;
    color: white;
  }
}
.text-align{
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #666;
}
.clear::after{
  content: "";
  display: block;
  clear: both;
}
.text-align:nth-child(2n){
  background-color: #fbf9f8;
}
</style>